import React, { Component } from 'react'

export default class Father extends Component {
    state = {
        nameArr: [
            '张三', '李四', '王五'
        ]
    }
    render() {
        return (
            <div>
                <ul style={{ height: '120px', border: '1px solid red', overflow: 'auto' }}>
                    {
                        this.state.nameArr.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
                <p><button onClick={() => {
                    this.state.nameArr.push('赵六')
                    this.setState({
                        nameArr: this.state.nameArr
                    })
                }}>添加</button></p>
            </div>
        )
    };
    getSnapshotBeforeUpdate(props, state) {
        console.log('getSnapshotBeforeUpdate');
        // 该生命周期必须有返回值,该生命周期的返回值为componentDidUpdate生命周期的参数
        // 获取dom 元素的高度 document.querySelector(选择器).offsetHeight

        // 执行时间: 在 componentDidUpdate执行, 并且只有数据更新才触发, 必须配合componentDidUpdate使用,
        // 否则报错

        // 该生命周期一般用于操作视图ui, 例如返回元素的大小 宽高 等一些dom 信息,
        // 主要就是用来获取dom 更新前的一些dom信息(快照)
        //console.log('ul-height', document.querySelector('ul').offsetHeight);

        return document.querySelector('ul').offsetHeight
    };
    componentDidUpdate(props, state, snap) {
        console.log('componentDidUpdate');
        console.log('snap', snap);

        // 根据snap 这个值(上一次的ul的高度来设置当前ul的滚动条高度);
        // scrollHeight 
        let ul = document.querySelector('ul');
        // ul滚动条的高度= ul的滚动高度- ul元素的高度(该值固定为120px) 
        ul.scrollTop = ul.scrollHeight - ul.offsetHeight

    }
}
